<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/index.css">
</head>

<body>
    <div id="app">
        <div class="contain">
            <!-- 左侧列表 -->
            <div class="list-box">
                <!-- 添加资产 -->
                <form class="my-form">
                    <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                    <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                    <button @click="add" type="button" class="btn btn-primary">添加账单</button>
                </form>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>消费名称</th>
                            <th>消费价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="item.id">
                            <td>{{index + 1}}</td>
                            <td>{{item.name}}</td>
                            <td :class="{red: item.price > 500}">{{item.price.toFixed(2)}}</td>
                            <td><a href="#" @click="del(item.id)">删除</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">消费总计： {{totalPrice.toFixed(2)}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- 右侧图表 -->
            <div class="echarts-box" id="main"></div>
        </div>
    </div>

    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.js"></script>
    <script>
        /**
         * 接口文档地址：
         * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
         * 
         * 功能需求：
         * 1. 基本渲染
            (1) 立刻发送请求获取数据 created
            (2) 拿到数据，存到data的响应式数据中
            (3) 结合数据，进行渲染 v-for
            (4) 消费统计 =>计算属性
         * 2. 添加功能
            (1)收集表单数据 v-model
            (2)给添加按钮注册点击事件，发送添加请求
            (3)需要重新渲染
         * 3. 删除功能
            (1) 注册点击事件，传参传 id
            (2) 根据 id 发送删除请求
            (3) 需要重新渲染
         * 4. 饼图渲染
            (1) 初始化一个饼图echarts.init(dom)  mounted钩子实现
            (2) 根据数据实时更新饼图  echarts.setoption([ ...})
         */
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    list: [],
                    name: '',
                    price: ''
                }
            },
            computed: {
                totalPrice() {
                    return this.list.reduce((sum, item) => sum + item.price, 0)
                }
            },
            methods: {
                async add() {
                    if (!this.name) {
                        alert('请输入消费名称')
                        return
                    }
                    if (typeof this.price !== 'number') {
                        alert('请输入正确的价格')
                        return
                    }

                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill',
                        {
                            creator: 'jack',
                            name: this.name,
                            price: this.price

                        })
                    console.log(res)
                    this.getList()

                    this.name = ""
                    this.price = ""
                },
                async del(id) {
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    console.log(res)
                    this.getList()
                },
                async getList() {
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill',
                        {
                            params: {
                                creator: 'jack'
                            }
                        })
                    console.log(res)
                    this.list = res.data.data

                    //更新echarts
                    this.myChart.setOption({
                        series: [
                            {
                                //data: [
                                    //{ value: 1048, name: 'Search Engine' },
                                    //{ value: 735, name: 'Direct' },
                                //],
                                //加括号的作用 识别成对象 不加的话 会识别成代码段
                                data: this.list.map(item => ({value: item.price, name: item.name}))

                            }
                        ]
                    })

                }
            },
            created() {
                this.getList();
            },
            mounted() {
                //把mychart挂载到vue实例上
                this.myChart = echarts.init(document.querySelector("#main"))
                this.myChart.setOption({
                    title: {
                        text: '消费账单列表',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '60%',
                            data: [
                                //{ value: 1048, name: 'Search Engine' },
                                //{ value: 735, name: 'Direct' },
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        })
    </script>
</body>

</html>